<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="top">全部作业</view>
		<!-- 作业 -->
		<view class="content">
			<view class="title">
				<text style="margin: 35rpx;">
					{{className}}
				</text>
			</view>
			<view class="homework" v-for="(item, index) in memberList" :key="index">
				<view class="name">
					<text>{{item.name}}</text>
				</view>
				<view class="list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="list_item" v-for="(item,index) in homeworkList">
							<view style="display: flex; flex-direction: row;" @click="jumpToDetail(item)">
								<view class="color" :style="[{backgroundColor:[item.color]}]"></view>
								<view class="detail">
									<text style="margin-top: 12rpx;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view style="border-top: 3rpx solid #F0F1EF;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				className: '',
				homeworkList: [
					{
						name: '作业1',
						color: '#FFAA5F',
						time: '2021/02/05 09:00~11:00',
						subject: '学习情况良好，但需注意拿放大镜十大军事打击大家的卡大大实打实等哈军事打击斤斤计较急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急是肯定就卡了。',
						score: 95,
						remark: '阿迪力看过那里的戛纳克里斯蒂娜发克里斯朵夫阿森纳的分类纳斯达克妇女克里斯朵夫',
						isFinish: true,
						overview: true	// 预览标志
					},
					{
						color: '#E96B5D',
						name: '作业2',
						time: '2021/02/05 09:00~11:00',
						subject: '学习情况良好，但需注意拿放大镜十大军事打击大家的卡大大实打实等哈军事打击斤斤计较急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急是肯定就卡了。',
						score: 95,
						remark: '阿迪力看过那里的戛纳克里斯蒂娜发克里斯朵夫阿森纳的分类纳斯达克妇女克里斯朵夫',
						isFinish: true,
						overview: true	// 预览标志
					},
					{
						color: '#0B7B92',
						name: '作业3',
						time: '2021/02/05 09:00~11:00',
						subject: '学习情况良好，但需注意拿放大镜十大军事打击大家的卡大大实打实等哈军事打击斤斤计较急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急是肯定就卡了。',
						score: 95,
						remark: '阿迪力看过那里的戛纳克里斯蒂娜发克里斯朵夫阿森纳的分类纳斯达克妇女克里斯朵夫',
						isFinish: true,
						overview: true	// 预览标志
					},
					{
						color: '#8AC6C6',
						name: '作业4',
						time: '2021/02/05 09:00~11:00',
						subject: '学习情况良好，但需注意拿放大镜十大军事打击大家的卡大大实打实等哈军事打击斤斤计较急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急是肯定就卡了。',
						score: 95,
						remark: '阿迪力看过那里的戛纳克里斯蒂娜发克里斯朵夫阿森纳的分类纳斯达克妇女克里斯朵夫',
						isFinish: true,
						overview: true	// 预览标志
					}
				],
				memberList: [
					{
						index: 0,
						name: "罗晓明"
					},
					{
						index: 1,
						name: "罗晓明"
					},
					{
						index: 2,
						name: "罗晓明"
					},
					{
						index: 3,
						name: "罗晓明"
					},
					{
						index: 4,
						name: "罗晓明"
					},
					{
						index: 5,
						name: "罗晓明"
					},
					{
						index: 6,
						name: "罗晓明"
					}
				]
			}
		},
		onLoad(e) {
			let className = e.className;
			className = className.split("(")[1];
			this.className = className.substring(0, className.length - 1);
		},
		methods: {
			jumpToDetail: function(item){
				uni.navigateTo({
					url:'../homeworkMore/homeworkMore?homework=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		/* justify-content: center; */
	}
	.top {
		width: 100%;
		/* height: 120rpx; */
		display: flex;
		/* box-sizing: border-box; */
		justify-content: center;
		/* text-align: center; */
		font-weight: 500;
		font-size: 36rpx;
		color: #FFAA5F;
		margin: 20rpx 0;
	}
	.content {
		width: 702rpx;
		height: 1000rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		background: #fff;
		border-radius: 32rpx;
		box-sizing: border-box;
	}
	.title {
		width: 702rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		font-weight: 400;
		font-size: 36rpx;
		border-radius: 32rpx;
		color: #0D1904;
		background-color: #fff;
	}
	.homework {
		width: 702rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		font-weight: 400;
		font-size: 26rpx;
		color: #0D1904;
		background-color: #fff;
		border-top: 3rpx solid #F0F1EF ;
	}
	.name {
		width: 25%;
		height: 90rpx;
		padding: 25rpx 0 25rpx 0;
		justify-content: center;
		text-align: center;
		color: #0D1904;
	}
	.list {
		width: 75%;
		height: 90rpx;
		justify-content: center;
		background-color: #fff;
	}
	.list_item {
		width: 185rpx;
		height: 64rpx;
		margin-top: 13rpx;
		margin-right: 17rpx;
		border-radius: 3rpx;
		background-color: #FBFBFB;
		display: inline-block;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 90rpx;
		
	}
	.color {
		width: 12rpx;
		height: 64rpx;
		border-radius: 3rpx 0 0 3rpx;
	}
	.detail {
		width: 100rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		text-align: center;
	}
</style>
=======
<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="top">
			<text style="margin: 35rpx;">
				全部作业
			</text>
		</view>
		<!-- 作业 -->
		<view class="content">
			<view class="title">
				<text style="margin: 35rpx;">
					钢琴初级一班
				</text>
			</view>
			<view class="homework" v-for="(item, index) in memberList" :key="index">
				<view class="name">
					<text>{{item.name}}</text>
				</view>
				<view class="list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="list_item" v-for="(item,index) in homeworkList">
							<view style="display: flex; flex-direction: row;" @click="jumpToDetail()">
								<view class="color" :style="[{backgroundColor:[item.color]}]"></view>
								<view class="detail">
									<text style="margin-top: 12rpx;">{{item.tag}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view style="border-top: 3rpx solid #F0F1EF;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeworkList: [
					{
						tag: '作业1',
						color: '#FFAA5F'
					},
					{
						tag: '作业2',
						color: '#E96B5D'
					},
					{
						tag: '作业3',
						color: '#0B7B92'
					},
					{
						tag: '作业4',
						color: '#8AC6C6'
					}
				],
				memberList: [
					{
						index: 0,
						name: "罗晓明"
					},
					{
						index: 1,
						name: "罗晓明"
					},
					{
						index: 2,
						name: "罗晓明"
					},
					{
						index: 3,
						name: "罗晓明"
					},
					{
						index: 4,
						name: "罗晓明"
					},
					{
						index: 5,
						name: "罗晓明"
					},
					{
						index: 6,
						name: "罗晓明"
					}
				]
			}
		},
		methods: {
			jumpToDetail: function(name){
				uni.navigateTo({
					url:'../homeworkMore/homeworkMore?=name' + this.name
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		/* justify-content: center; */
	}
	.top {
		width: 100%;
		height: 120rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: left;
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFAA5F;
	}
	.content {
		width: 702rpx;
		height: 1000rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		background: #fff;
		border-radius: 32rpx;
		box-sizing: border-box;
	}
	.title {
		width: 702rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		font-weight: 400;
		font-size: 36rpx;
		border-radius: 32rpx;
		color: #0D1904;
		background-color: #fff;
	}
	.homework {
		width: 702rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		font-weight: 400;
		font-size: 26rpx;
		color: #0D1904;
		background-color: #fff;
		border-top: 3rpx solid #F0F1EF ;
	}
	.name {
		width: 25%;
		height: 90rpx;
		padding: 25rpx 0 25rpx 0;
		justify-content: center;
		text-align: center;
		color: #0D1904;
	}
	.list {
		width: 75%;
		height: 90rpx;
		justify-content: center;
		background-color: #fff;
	}
	.list_item {
		width: 185rpx;
		height: 64rpx;
		margin-top: 13rpx;
		margin-right: 17rpx;
		border-radius: 3rpx;
		background-color: #FBFBFB;
		display: inline-block;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 90rpx;
		
	}
	.color {
		width: 12rpx;
		height: 64rpx;
		border-radius: 3rpx 0 0 3rpx;
	}
	.detail {
		width: 100rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		text-align: center;
	}
</style>
>>>>>>> ee4d6343f278292023f746d51d47671114104355
